<template>
    <TableLayout :pageHeight="50">
        <template #search>
            <el-card>
                <el-button @click="showSearch = !showSearch">daf</el-button>
                <el-input v-model="input" placeholder="Please input" />
                <div>搜索框</div>
                <div>搜索框</div>
                <div v-if="showSearch">搜索框</div>
                <div v-if="showSearch">搜索框</div>
                <div v-if="showSearch">搜索框</div>
                <div v-if="showSearch">搜索框</div>
            </el-card>
            <div style="height: 10px"></div>
        </template>
        <template #header>
            <el-row justify="end">
                <el-button icon="plus" type="success" @click="">新增</el-button>
            </el-row>
        </template>

        <template #table='h'>
            <el-table border :height="h.height" :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" width="180"/>
                <el-table-column prop="name" label="Name" width="180"/>
                <el-table-column prop="address" label="Address"/>
            </el-table>
        </template>
        <template #pagination>
            <el-pagination style="height: 50px;" layout="prev, pager, next" :total="50"/>
        </template>
    </TableLayout>
</template>
<style scoped>
    .testaa {
        /*height: calc(100% - 70px) !important;*/
    }
</style>

<script lang="ts" setup>
    import {computed, onMounted, ref} from "vue";
    import store from "../../store";
    import TablePage from "./tablePage.vue";

    import TableLayout from "@/components/TableLayout.vue";

    let headerHeight = ref();
    let test = ref();
    let pageDiv = ref();
    let abcd = ref();
    let serchDiv = ref();
    let input = ref();
    let showSearch = ref(false);
    const tableData = [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
    ]
</script>